import { useCallback, useEffect, useState } from 'react';
import { NavBar, Empty } from 'react-vant';
import { useNavigate } from 'react-router-dom';
import { DatePicker, Space, ConfigProvider } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import 'dayjs/locale/zh-cn';
import dayjs from 'dayjs';
import { getComplaint } from '../../interfaces';
import './css/com.css';


export default function ComplaintReport() {
  const options = ['', '食品安全', '卫生安全', '其它'];
  const name= localStorage.getItem('name');
  const navigate = useNavigate();
  // 确保初始值不为 null
  const [selectedMonth, setSelectedMonth] = useState(dayjs());
  const [xs,setxs]=useState(false);
  const [list, setlist] = useState([]);
  const [type, settype] = useState('');

  const onChange = (date) => {
    // 添加 null 检查
    if (!date) return;
    setSelectedMonth(date);
    console.log(date.format('YYYY年M月'));
  };

  // 获取数据
  const getlist = useCallback(async () => {
    try {
      // 确保 selectedMonth 存在
      if (!selectedMonth) return;
      const { data: { list } } = await getComplaint(
        selectedMonth.format('YYYY-MM'),
        type
      );
      setlist(list.filter(i=>i.school===name));
      setxs(true);
    } catch (error) {
      console.error('获取数据失败:', error);
    }
  }, [selectedMonth, type,name])

  useEffect(() => {
    getlist();
  }, [getlist]);

  function getTypeColor(type) {
    const typeColors = {
      '食品安全': 'linear-gradient(to right, #ff758c, #ff7eb3)',
      '卫生安全': 'linear-gradient(to right, #7f7fd5, #86a8e7)',
      '其它': 'linear-gradient(to right, #a8e063, #56ab2f)'
    };
    return typeColors[type] || 'linear-gradient(to right, #4facfe, #00f2fe)';
  }

  return (
    <ConfigProvider locale={zhCN}>
      <NavBar
        title={<h3>投诉举报</h3>}
        style={{ '--rv-nav-bar-icon-color': 'red', '--rv-nav-bar-arrow-size': '20px' }}
        rightText={
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <i className='iconfont icon-icon-test' style={{ color: 'orangered' }}></i>
            <span>我的投诉</span>
          </div>
        }
        onClickLeft={() => navigate(-1)}
        onClickRight={() => navigate('/mycomplaint')}
      />
      <div style={{  backgroundColor: '#F2F2F2', width: '100vw', height: '7vh', lineHeight: '7vh', display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
        <Space direction="vertical">
          <DatePicker
            style={{ height: '4vh'}}
            value={selectedMonth}
            onChange={onChange}
            picker="month"
            format="YYYY年M月"
            placeholder="选择月份"
            allowClear={false}
          />
        </Space>
        <select style={{ height: '4vh', width: '100px' }} onChange={(e) => { settype(e.target.value) }} value={type}>
          {options.map(i => <option value={i} key={i}>{i === '' ? "全部" : i}</option>)}
        </select>
      </div>
      <hr></hr>
      <div style={{ backgroundColor: '#F2F2F2', height: '80vh'}}>
        {list.length > 0&&xs? (
          <>
            {list.map(i => (
              <div onClick={() => { navigate('/complaintDetails', { state: i }) }} style={{borderRadius:'17px', backgroundColor: '#FFFFFF', margin: '10px 0', display: 'flex', flexDirection: 'column' }} key={i._id}>
                <h4 style={{ margin: '5px 10px' }}>{i.title}</h4>
                <p style={{ width: '200px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', margin: '10px' }}>{i.content}</p>
                <div style={{ margin: '5PX 10px' }}>
                  <button style={{ background: getTypeColor(i.type), border: 'none', color: '#fff',fontSize: '12px',padding: '2px 8px',borderRadius: '10px'  }}>{i.type}</button>
                  <span style={{ float: 'right', marginRight: '15px' }}>{i.time}</span>
                </div>
              </div>
            ))}
          </>
        ) : xs?(
          <Empty image="error" description="没有数据" style={{ backgroundColor: '#FF6C37', height: '60vh', '--rv-empty-description-color': '#A572AA', '--rv-empty-description-font-size': '20px' }} />
        ):''}

        <div
          style={{width: '60px',borderRadius: '50%',height: '60px',background: 'linear-gradient(to right,rgb(102, 239, 141),rgb(23, 181, 28))',margin: '10px 0',display: 'flex',flexDirection: 'column',alignItems: 'center',justifyContent: 'center',position: 'fixed',bottom: '20px',right: '40px'
          }}
          onClick={() => { navigate('/complaint') }}
        >
          <i className='iconfont icon-tousujianyi'></i>
          <span style={{ color: 'white', fontSize: '15px' }}>投诉</span>
        </div>
      </div>
    </ConfigProvider>
  );
}